<template>
    <div>
        <div style="margin: 20px 20px 10px 0; width: 50%">
            <el-select
                v-model="mySearchHistior.options"
                placeholder="请选择"
                class="searchSelectWidth"
            >
                <el-option label="下单时间" value="startTime"> </el-option>
                <el-option label="完成时间" value="endTime"> </el-option>
            </el-select>
            <el-input
                v-model="mySearchHistior.search_data"
                placeholder="请输入你想搜索的内容"
                class="inputWidth"
            ></el-input>
            <el-button
                type="primary"
                icon="el-icon-search"
                @click="searchHistory(mySearchHistior)"
                >搜索</el-button
            >
            <p>
                {{ value }}
            </p>
        </div>
        <template>
            <el-table :data="historyOrders.data" border style="width: 100%">
                <el-table-column prop="_id" label="订单号" width="180">
                </el-table-column>
                <el-table-column prop="startTime" label="下单时间" width="180">
                </el-table-column>
                <el-table-column prop="endTime" label="完成时间">
                </el-table-column>
                <el-table-column prop="tenantsId.name" label="租客名字">
                </el-table-column>
                <el-table-column prop="parkingsId.address" label="租的车位">
                </el-table-column>
                <el-table-column label="评价">
                    <template slot-scope="scope">
                        <el-button
                            v-if="!scope.row.isEvaluate"
                            type="primary"
                            @click="inputEvaluateContent(scope.row)"
                            >评价</el-button
                        >
                        <el-button
                            v-else
                            type="success"
                            @click="checkEvaluate(scope.row)"
                        >
                            查看评价
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column label="删除">
                    <template slot-scope="scope">
                        <el-button
                            type="primary"
                            icon="el-icon-delete"
                            @click="deleteHistory(scope.row._id)"
                        ></el-button
                    ></template>
                </el-table-column>
            </el-table>
        </template>

        <!-- 评价模态框 -->
        <el-drawer
            title="请输入你对这个订单的评价"
            :before-close="handleClose"
            :visible.sync="dialog"
            direction="ltr"
            custom-class="demo-drawer"
            ref="drawer"
            class="youyi"
        >
            <div class="demo-drawer__content youyi">
                <div>
                    <div class="block">
                        <span class="demonstration">综合评分</span>
                        <el-rate
                            v-model="myInputEvaluateCotent.evaluateStar"
                            :colors="colors"
                        >
                        </el-rate>

                        <div
                            v-if="myInputEvaluateCotent.evaluateStar == 1"
                            class="rateColor"
                        >
                            <p>垃圾用户毁我青春</p>
                            <img
                                src="http://localhost:3000/images/1%E6%98%9F.png"
                                alt=""
                            />
                            <div>
                                <span>猜你想说</span
                                ><el-tag
                                    type="danger"
                                    class="chaiTag"
                                    @click="
                                        changeEvaContent(
                                            tagContent.garbage.value1
                                        )
                                    "
                                    >{{ tagContent.garbage.value1 }}</el-tag
                                ><el-tag
                                    type="danger"
                                    class="chaiTag"
                                    @click="
                                        changeEvaContent(
                                            tagContent.garbage.value1
                                        )
                                    "
                                    >{{ tagContent.garbage.value1 }}</el-tag
                                >
                            </div>
                        </div>
                        <div
                            v-if="myInputEvaluateCotent.evaluateStar == 2"
                            class="rateColor"
                        >
                            <p>为什么不按时给我钱钱</p>
                            <img
                                src="http://localhost:3000/images/2%E6%98%9F.png"
                                alt=""
                            />
                            <div>
                                <span>猜你想说</span
                                ><el-tag
                                    type="info"
                                    class="chaiTag"
                                    @click="
                                        changeEvaContent(tagContent.poor.value1)
                                    "
                                    >{{ tagContent.poor.value1 }}</el-tag
                                ><el-tag
                                    type="info"
                                    class="chaiTag"
                                    @click="
                                        changeEvaContent(tagContent.poor.value1)
                                    "
                                    >{{ tagContent.poor.value1 }}</el-tag
                                >
                            </div>
                        </div>
                        <div
                            v-if="myInputEvaluateCotent.evaluateStar == 3"
                            class="rateColor"
                        >
                            <p>一般一般世界第三</p>
                            <img
                                src="http://localhost:3000/images/3%E6%98%9F.png"
                                alt=""
                            />
                            <div>
                                <span>猜你想说</span
                                ><el-tag
                                    type="warning"
                                    class="chaiTag"
                                    @click="
                                        changeEvaContent(
                                            tagContent.general.value1
                                        )
                                    "
                                    >{{ tagContent.general.value1 }}</el-tag
                                ><el-tag
                                    type="warning"
                                    class="chaiTag"
                                    @click="
                                        changeEvaContent(
                                            tagContent.general.value1
                                        )
                                    "
                                    >{{ tagContent.general.value1 }}</el-tag
                                >
                            </div>
                        </div>
                        <div
                            v-if="myInputEvaluateCotent.evaluateStar == 4"
                            class="rateColor"
                        >
                            <p>你真的很棒棒哦</p>
                            <img
                                src="http://localhost:3000/images/4%E6%98%9F.png"
                                alt=""
                            />
                            <div>
                                <span>猜你想说</span
                                ><el-tag
                                    class="chaiTag"
                                    @click="
                                        changeEvaContent(tagContent.good.value1)
                                    "
                                    >{{ tagContent.good.value1 }}</el-tag
                                ><el-tag
                                    class="chaiTag"
                                    @click="
                                        changeEvaContent(tagContent.good.value1)
                                    "
                                    >{{ tagContent.good.value1 }}</el-tag
                                >
                            </div>
                        </div>
                        <div
                            v-if="myInputEvaluateCotent.evaluateStar == 5"
                            class="rateColor"
                        >
                            <p>完美</p>
                            <img
                                src="http://localhost:3000/images/5%E6%98%9F.png"
                                alt=""
                            />
                            <div>
                                <span>猜你想说</span
                                ><el-tag
                                    type="success"
                                    class="chaiTag"
                                    @click="
                                        changeEvaContent(
                                            tagContent.veryGood.value1
                                        )
                                    "
                                    >{{ tagContent.veryGood.value1 }}</el-tag
                                ><el-tag
                                    type="success"
                                    class="chaiTag"
                                    @click="
                                        changeEvaContent(
                                            tagContent.veryGood.value1
                                        )
                                    "
                                    >{{ tagContent.veryGood.value1 }}</el-tag
                                >
                            </div>
                        </div>
                    </div>
                </div>

                <el-form>
                    <el-form-item label="评价">
                        <el-input
                            type="textarea"
                            v-model="myInputEvaluateCotent.myEvaluateContent"
                            placeholder="请输入你想评价的内容"
                        ></el-input>
                    </el-form-item>
                </el-form>
                <div class="demo-drawer__footer">
                    <el-button @click="cancelForm">取 消</el-button>
                    <el-button
                        type="primary"
                        @click="mySubmitEvaluateBtn(myInputEvaluateCotent)"
                        :loading="loading"
                        >{{ loading ? "提交中 ..." : "确 定" }}</el-button
                    >
                </div>
            </div>
        </el-drawer>

        <!-- 查看评价模态框 -->
        <el-drawer title="查看评价" :visible.sync="drawer" :with-header="false">
            <h1>我的评价</h1>
            <el-rate
                v-model="evaluateStar"
                disabled
                show-score
                text-color="#ff9900"
            >
            </el-rate>
            <img
                v-if="evaluateStar == 1"
                src="http://localhost:3000/images/1%E6%98%9F.png"
                alt=""
            />
            <img
                v-else-if="evaluateStar == 2"
                src="http://localhost:3000/images/2%E6%98%9F.png"
                alt=""
            />
            <img
                v-else-if="evaluateStar == 3"
                src="http://localhost:3000/images/3%E6%98%9F.png"
                alt=""
            />
            <img
                v-else-if="evaluateStar == 4"
                src="http://localhost:3000/images/4%E6%98%9F.png"
                alt=""
            />
            <img
                v-else-if="evaluateStar == 5"
                src="http://localhost:3000/images/5%E6%98%9F.png"
                alt=""
            />
            <div>{{ myEvaluateContentModel }}</div>
            <div>{{ myInputEvaluateCotent.evaluateStar }}</div>
        </el-drawer>
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="historyOrders.currentPage"
            :page-sizes="[3, 4, 5, 6]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="historyOrders.totalNum"
        >
        </el-pagination>

        <h1>每页多少条{{ pageSize }}</h1>
    </div>
</template>
   

<script>
import { createNamespacedHelpers } from "vuex";
const {
    mapState,
    mapMutations,
    mapGetters,
    mapActions,
} = createNamespacedHelpers("orders");
export default {
    data() {
        return {
            //评价myInputEvaluateCotent.evaluateStar
            dialog: false,
            myInputEvaluateCotent: {
                _id: "",
                evaluateStar: null,
                myEvaluateContent: "",
                tenantsId: "",
                tenantsCredits: "",
            },

            //搜索

            mySearchHistior: {
                options: "startTime",
                search_data: "",
            },
            //我的评价
            drawer: false,
            //我的评价内容
            myEvaluateContentModel: "",
            evaluateStar: 0,
            value2: null,
            colors: ["#99A9BF", "#F7BA2A", "#FF9900"],
            iconClasses: [
                "icon-rate-face-1",
                "icon-rate-face-2",
                "icon-rate-face-3",
            ], // 等同于 { 2: 'icon-rate-face-1', 4: { value: 'icon-rate-face-2', excluded: true }, 5: 'icon-rate-face-3' }
            options: [
                {
                    value: "address",
                    label: "地址",
                },
                {
                    value: "time",
                    label: "完成时间",
                },
                {
                    value: "price",
                    label: "价钱",
                },
            ],
            value: "",
            input: "",
            //tag标签猜你想说标签
            tagContent: {
                garbage: {
                    value1: "这个用户不诚信",
                    value2: "这个租客不给钱",
                },
                poor: {
                    value1: "这个用户不太行",
                    value2: "每月给租金拖拖拉拉",
                },
                general: {
                    value1: "一般",
                    value2: "着实一般",
                },
                good: {
                    value1: "这个租客还可以",
                    value2: "有按时给",
                },
                veryGood: {
                    value1: "这个用户非常好",
                    value2: "给钱很耿直",
                },
            },
            formLabelWidth: "80px",
            timer: null,
            loading: false,
        };
    },
    mounted() {
        this.getHistoryOrders();
    },
    computed: {
        ...mapState(["historyOrders", "pageSize", "searchHistoryData"]),
    },
    watch: {
        "historyOrders.currentPage"() {
            this.getHistoryOrders();
        },
        pageSize() {
            this.getHistoryOrders();
        },
        searchHistoryData() {
            this.getHistoryOrders();
        },
    },
    methods: {
        ...mapActions([
            "getHistoryOrders",
            "addEvaluate",
            "deleteHistoryOrders",
        ]),
        ...mapMutations([
            "changCurrentPage",
            "changePageSize",
            "searchHistory",
        ]),
        handleClose(done) {
            if (this.loading) {
                return;
            }
            this.$confirm("确定要提交表单吗？")
                .then(async (_) => {
                    const data = await this.addEvaluate(
                        this.myInputEvaluateCotent
                    );
                    this.loading = true;
                    this.timer = setTimeout(() => {
                        done();
                        // 动画关闭需要一定的时间
                        setTimeout(() => {
                            this.loading = false;
                        }, 400);
                    }, 2000);
                    if (data.status) {
                        this.getHistoryOrders();
                        this.$message({
                            type: "success",
                            message: data.message,
                        });
                    }
                })
                .catch((_) => {});
        },

        //输入评价模态框
        inputEvaluateContent(val) {
            console.log("评价----------", val);
            this.dialog = true;
            this.myInputEvaluateCotent._id = val._id;
            this.myInputEvaluateCotent.tenantsId = val.tenantsId._id;
            this.myInputEvaluateCotent.tenantsCredits = val.tenantsId.credits;
        },

        //提交评价按钮
        mySubmitEvaluateBtn(val) {
            this.$refs.drawer.closeDrawer();
        },

        //评价模态框方法
        checkEvaluate(val) {
            this.drawer = true;
            this.myEvaluateContentModel = val.evaluateContent;
            this.evaluateStar = val.evaluateStar;
        },
        cancelForm() {
            this.loading = false;
            this.dialog = false;
            clearTimeout(this.timer);
        },

        //删除按钮
        deleteHistory(val) {
            this.$confirm("你确认要删除这条历史订单吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            })
                .then(async () => {
                    const msg = await this.deleteHistoryOrders(val);
                    if (msg.status) {
                        this.getHistoryOrders();
                        this.$message({
                            type: "success",
                            message: "删除成功!",
                        });
                    }
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },

        //点击标签更改评价内容
        changeEvaContent(val) {
            this.myInputEvaluateCotent.myEvaluateContent += val;
        },

        //设置每页显示多少条
        handleSizeChange(val) {
            this.changePageSize(val);
        },
        //翻页方法
        handleCurrentChange(val) {
            this.changCurrentPage(val);
        },
        //搜索按钮
        myChangeSearchData(val) {
            this.changeSearchData(val);
            this.mySearchData.search_data = "";
        },
    },
};
</script>

<style lang="scss">
.inputWidth {
    width: 30%;
    margin: 0 5px;
}
.searchHistoryOrders {
    margin-bottom: 30px;
}
.searchSelectWidth {
    width: 15%;
}
.rateColor {
    color: orange;
    font-size: 15px;
}
.youyi {
    margin: 0 50px;
}
// img {
//     float: left;
// }
.chaiTag {
    margin: 0 5px;
    cursor: pointer;
}
</style>